<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="message">
        <!-- <a href="http://www.baidu.com/"></a> -->
    </div>
    <ul>
        <li>111111</li>
    </ul>
    <button>创建元素</button>
    <script>
        // 元素节点
        // document.createElement（标签名称）返回的是一个对象
        // 属性节点
        // document.createAttribute（属性名称）
        // 文本内容
        //  document.createTextNode（文本内容）
        //  关于未来文素   后期通过某些行为导致页面上元素发生了变化
          // 4、创建节点
          document.querySelector('button').onclick = function(){
            // 1、创建a标签的元素节点
            var aDom = document.createElement('a');
            // 2、创建属性节点
            var attrNode = document.createAttribute('href');
            // 3、设置属性节点的内容
            attrNode.nodeValue = 'www.baidu.com';
            // 4、将属性节点设置到a标签上  setAttributeNode为节点设置属性节点 传递属性节点对象
            aDom.setAttributeNode(attrNode);
            // 5、创建文本节点
            var textNode = document.createTextNode('百度一下')
            // 6、将文本节点设置为aDom的子节点
            aDom.appendChild(textNode)
            console.log(aDom)
            // 7、将a标签加入到div中
            document.querySelector('.message').appendChild(aDom)
            // 上面的代码等价于下面的一句话
            // document.querySelector('.message').innerHTML = '<a href="www.baidu.com">百度一下</a>'

            // 返回结果是一个dom对象
            var liDom = document.createElement('li');
            liDom.innerHTML = 'aaaaa';
            liDom.className = 'a';
            document.querySelector('ul').appendChild(liDom)
        }
    </script>
</body>
</html>